/* 盒子样式 */
.box {
  background-color: #fff;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
/* 标题样式相关 */
.title{
    width: 100%;
    /* 去掉单行文本限制 */
    /* height: 50px; */
    /* div底部边框去掉 */
    /* border-bottom: 1px solid #ddd; */
    margin-bottom: 16px;
}
/* 标题文本 */
.title a {
    /* display:inline-block 简单来说就是将对象呈现为inline对象，但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link（a元素）inline-block属性值，使其既具有block的宽度高度特性又具有inline的同行特性 */
    display: inline-block;
    /* inline-box的高度 */
    /* line-height: 50px; */
    /* 文本底部边框去掉 */
    /* border-bottom: 1px solid red; */
    font-size: 16px;
    color: #000;
    /* 上下内容边距为16px */
    padding: 10px 16px; 
}
/* 标题下划线 */
.title hr{
  width:80%;
  margin:0 auto;
  border: 0;
  height: 1px;
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(255, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

/* ul样式 */
.pic-list {
    /* https://www.runoob.com/w3cnote/flex-grammar.html */
    /* 浮动显示，自动换行 */
    display: -webkit-flex; /* Safari */
    display: flex;
    padding: 0 16px;
    /* flex-direction属性决定主轴的方向（即项目的排列方向）。 */
    /* flex-direction: row; */

    /* 项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，自动换行 */
    flex-wrap: wrap;
}

/* li样式 */
.pic-list .pic-list-item {
    width: 50%;
     /* 浮动显示，自动换行 */
    display: flex;
    /* flex-direction属性之主轴为垂直方向 */
    flex-direction: column;
    margin-top: 16px;
}

/* http://www.w3school.com.cn/cssref/selector_nth-of-type.asp */
/* :nth-of-type(n) 选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素. */
/* 排除第一个，第二个元素外 margin-top: 16px; 全局有效 */
.pic-list .pic-list-item:nth-of-type(1),
.pic-list .pic-list-item:nth-of-type(2) {
    margin-top: 0;
}
/* 单数的item的情况下距离右边的间距 */
.pic-list .pic-list-item:nth-of-type(odd) {
    padding-right: 8px;
}
/* 双数item的情况下距离左边的间距 - 两列的列表项中间间距 */
.pic-list .pic-list-item:nth-of-type(even) {
    padding-left: 8px;
}

/* li(item)距离顶部的间距 */
.pic-list .pic-list-item-row {
    margin-top: 4px;
}

/* 图片高度自适应 - 防止列显示的情况下被拉伸 */
.pic-list .pic-list-item-pic {
    width: 100%;
    height: auto;
}

/* 标题字体大小和颜色 */
.pic-list .pic-list-item-title {
    font-size: 14px;
    color: #262626;
}

/* 价格字体大小和颜色 */
.pic-list .pic-list-item-price {
    font-size: 12px;
    color: #595959;
}

/* 底部二维码样式 */
.wxqr {
    text-align: center;
    margin-top: 20px;
}